<template>
    <!-- //列表 -->
    <view>

        <view class="selectList show" v-for="item,idx in assFormtList " :key="item.id">
            <view class="head">

                <view class="head-l">
                    <text class="s-name b">{{item.supermarketName }}</text>

                    <text v-if="item.ifGroupPurchase == 1" class="j-tag red">拼团订单</text>
                    <text v-if="item.goodsGroupPurchaseStatus == 2" class="j-tag green full">拼团成功</text>
                    <text v-else-if="item.goodsGroupIsEnd == 1" class="j-tag red full">已过期</text>
                    
                </view>
                <view class="head-r">
                    <text class=" min ml5">{{item.orderStatusStr  }} </text>
                </view>

            </view>

            <view class="goods-content">

                <view class="goods-left" v-if="item.orderGoodsModelList ">

                    <view v-if=" item.orderGoodsModelList.length == 1">

                        <view class="sec_item ul" @click="()=>goDetail( item)">
                            <view class="li" v-for=" goodsItem,idx in item.orderGoodsModelList" :key='goodsItem.id'>
                                <view class="p productBox">
                                    <view class="imgs">
                                        <image :src="goodsItem.listPictureSrc" mode="aspectFit" :lazy-load="true"></image>
                                    </view>
                                    <view class="info">
                                        <view class="info-l">
                                            <view class="name text-delic2">
                                                <text class="">
                                                    {{ goodsItem.goodsName }}
                                                </text>
                                            </view>                                    
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view v-else class="goods-part" @click="()=>goDetail( item)">
                        <scroll-view class="myScroll" scroll-x="true">

                            <view class="content" v-for="goodsItem in item.orderGoodsModelList" :key="goodsItem.id">
                                <view class="imgBox">
                                    <image :src="goodsItem.listPictureSrc" mode="aspectFit" :lazy-load="true"></image>
                                </view>
                            </view>
                        </scroll-view>
                    </view>

                </view>

                <view class="priceBox text-right">

                    <text class="min price-col">￥</text>
                    <text class="price-col f30">{{item.orderMoney }}</text>
                    <view class="n">
                        共{{item.orderGoodsModelList.length}}件
                    </view>
                      
                </view>

            </view>

            <!-- <view class="groupLine " v-if="item.goodsGroupPurchaseStatus == 1 && item.goodsGroupIsEnd != 1" @click="$goNext('/pages/group/people?orderId='+item.id+'&goodsGroupPurchaseId='+item.goodsGroupPurchaseId)">
                
                <RightTemplate rightColor='#ffffff'>

                    <view class="groupBox">
                        <view>
                            <image src="../../static/images/group.png" mode="widthFix" />
                        </view>
                        <view class="text-center text-con">
                            <text class="status">{{item.goodsGroupPurchaseStatusStr }}</text>
                            <Countdown :endTime='item.goodsGroupEndTime' dark/>
                            <text class="f20 col-hui">后失效</text>
                        </view>
                    </view>
                   

                </RightTemplate>
            </view> -->

            <view class="btns-box">
                <view >
                    <!-- 给了钱 就不能取消了 走线下   -->
                    <text class="btn cancel" @click="()=>handleClick('cancel',item)" v-if=" item.orderStatus < 8  ">取消订单</text>
                    <text class="btn pay" @click="()=>handleClick('pay',item)" v-if=" item.orderStatus < 8 && item.goodsGroupIsEnd != 1">立即付款</text>
                    <!-- <text  class="btn report" bindtap='handleSureReport' data-item='{{item}}'>确认报件</text> -->
                    <text class="btn pay" @click="()=>handleClick('again',item)" v-if=" item.orderStatus == 70000 ">再来一单</text>
                    <text class="btn full" @click="()=>handleClick('evaluate',item)" v-if=" item.orderStatus == 70000  && item.goodsCommentStatus != 1 ">去评价</text>
                </view>
               
            </view>
        </view>

    </view>

</template>

<script>
import { statusList, DealOrderInfo } from '../../utils/configDIct.js'
import Countdown from '@/components/Countdown'
import RightTemplate from '@/components/RightTemplate'
export default {
    components: { Countdown ,RightTemplate},
    props: ['listData', 'handle'],
    data () {
        return {
            assFormtList: [],
        }
    },
    computed: {

    },

    watch: {
        listData: {
            deep: true,
            immediate: true,
            handler (current) {

                // console.log('不对么', current)

                this.assFormtList = this.dealOrderData(current)
            }
        }
    },
    methods: {

        //处理数据
        dealOrderData (data) {

            return DealOrderInfo(data)

        },
        handleClick (type, row) {
            //评价
            if( type == 'evaluate'){

                uni.navigateTo({
                     url: '/pages/center/evaluate/index?id='+row.id
                });

                return
            }
            this.$emit('handleClick', type, row)
        },
        goDetail (row) {

            // console.log("啊打算结婚啊是看得见哈上的讲话", row)


            this.$emit('handleClick', 'detail', row)

            

            // this.$goNext('/pages/center/order/detail?id=' + row.id)
        },
    }
}
</script>

<style scoped lang="scss">
.list-box {
    padding: 20rpx 32rpx 60rpx;
}
.selectList {
    box-sizing: border-box;
    width: 100%;
    z-index: 12;
    padding: 10px 0px 14px;
    background: #fff;
    font-size: 12px;
    transition: all 0.4s;
    margin-bottom: 32rpx;
    border-radius: 6px;
    box-shadow: 0 0 20rpx #eaeaea;
    .head {
        display: flex;
        width: 100%;
        // margin-bottom: 20rpx;
        padding: 0 32rpx 20rpx;
        // border-bottom: 1rpx solid #eaeaea;
        font-size: 28rpx;
        color: #333;
        .head-l {
            width: 100%;
            flex: 1;
            .s-name {
                flex: 1;

                width: 100%;
            }
        }
        .head-r {
            margin-left: 10px;
        }
    }
    .priceBox {
        padding: 26rpx 0rpx 10rpx;
        font-size: 24rpx;
        margin-left: 20rpx;
        width: 110rpx;
        .min {
            font-size: 20rpx;
        }
        .n{
            font-size: 20rpx;
            color: #999;
        }
    }
    .groupLine{
        text-align: center;
        padding: 4rpx 30rpx;
        line-height: 1.5;
        background: linear-gradient(to right,#fae6b4, #fad469,);
        border-radius: 50rpx;
        // width: 80%;
        margin:30rpx 32rpx 20rpx;
        // background: rgba(253, 246, 241, 0.8); #ff8f44
        .groupBox{
            display: flex;
            align-items: center;
            image{
                width: 60rpx;
                height: 60rpx;
            }
            .status{
                font-weight: bold;
                font-size: 30rpx;
                color: rgb(95, 35, 14);
                margin: 0 10rpx 0 14rpx;
            }
            .text-con{
                display: flex;
                align-items: center;
            }
        }
    }
    .btns-box {
        text-align: right;
        padding: 20rpx 32rpx 0rpx;
        .btn {
            display: inline-block;
            text-align: right;
            padding: 10rpx 24rpx;
            border-radius: 50px;
            margin-left: 30rpx;
            font-size: 24rpx;
            background-color: #ffffff;
            color: #ff7596;
            border: 1rpx solid #ff7596;
        }
        .btn.update {
            color: #f0833b;
            border: 1rpx solid #f0833b;
        }
        .btn.report {
            color: #ff0000;
            border: 1rpx solid #ff0000;
        }
        .btn.cancel {
            color: #b9b9b9;
            border: 1rpx solid #b9b9b9;
        }
        .btn.full{
            background: #ff7596;
            border: 1rpx solid #ff7596;
            color: #fff;
        }
    }
}
.goods-content {
    display: flex;
    padding: 0 32rpx;
    .goods-left {
        flex: 1;
        overflow: hidden;
    }
}

// 商品
.sec_item {
    padding-top: 28rpx;
    .li {
        // padding: 10rpx 32rpx;
    }
    // border-bottom: 1rpx solid #f1f1f1;

    .productBox {
        display: flex;
        .imgs {
            margin-right: 20rpx;
            image {
                width: 100rpx;
                height: 100rpx;
                background: #f1f1fe;
                border-radius:3rpx;
            }
        }
        .info {
            display: flex;
            width: 100%;
            .info-l {
                flex: 1;
            }
            .info-r {
                text-align: right;
                min-width: 150rpx;
                margin-left: 10rx;
                font-size: 30rpx;
                .min {
                    font-size: 22rpx;
                }
            }
            .name {
                font-size: 26rpx;
                color: #000;
                font-weight: bold;
            }
            .bottom {
                // padding-top: 10rpx;
                overflow: hidden;
                .nums {
                    float: left;
                    color: #888;
                    font-size: 26rpx;
                    margin: 6rpx 0;
                    // .old-price {
                    //     margin-left: 10rpx;
                    //     text-decoration: line-through;
                    // }
                    // .col-red {
                    //     font-size: 30rpx;
                    // }
                    // .mini {
                    //     font-size: 26rpx;
                    // }
                }
                .buy-btn {
                    margin: 6rpx 0;
                    float: right;
                    min-width: 140rpx;
                    text-align: right;
                }
            }
        }
    }
}
.goods-part {
    width: 100%;
    .myScroll {
        width: 100%;
        white-space: nowrap;
    }
    .content {
        position: relative;
        box-sizing: border-box;
        display: inline-block;
        width: 110rpx;
        vertical-align: top;
        & + .content {
            margin-left: 10rpx;
        }
    }
    .imgBox {
        width: 100%;
        height: 110rpx;
        line-height: 100%;
        overflow: hidden;
        background: #f1f1f1;
        border-radius: 10px;
        font-size: 0;
        image {
            width: 100%;
            height: 100%;
        }
    }
}
</style>
